<template>
	<view class="pay_success">
		<view class="content" :style="{background:color}">
			<view class="first">
				<image src="@/static/image/success.png"></image>
				<view>支付成功</view>
			</view>
			<view class="last">
				<text>关于邮寄：下午4点前提交的将当天包邮寄出并通过短信通知韵达单号，敬请查收。
					收件信息如有填错或需更改证书署名，请发送正确信息至邮箱3092015856@qq.com，邮件中务必注明获奖者姓名及手机号。</text>
			</view>
		</view>
		<view class="state">
			<view @click="isShow=true">联系客服</view>
			<view>|</view>
			<view @click="headleApply">申请退款</view>
		</view>

		<view class="footer">
			<view>客服时间：工作日早上9:30--下午6:30</view>
			<view>公司地址：广州市天河区苏荷独立艺术园区仁沃孵化器4楼</view>
		</view>

		<view class="mask" v-if="isShow || isShow1 || isShow2">
			<view class="modal">
				<!-- 联系客服 -->
				<view class="service" v-if="isShow">
					<image class="cancel" @click="isShow=false" src="@/static/image/clos.png"></image>
					<view class="title">联系客服</view>
					<view class="box">
						<view class="way">
							<view class="item">
								<image src="@/static/image/mailbox.png"></image>
								<view>{{mailbox}} 邮箱</view>
							</view>
							<view class="copy" @click="copyBtn(0)">一键复制</view>
						</view>
						<view class="way">
							<view class="item">
								<image src="@/static/image/phone.png"></image>
								<view>{{phone}} 手机号</view>
							</view>
							<view class="copy" @click="copyBtn(1)">一键复制</view>
						</view>
						<view class="way">
							<view class="item">
								<image src="@/static/image/wx.png"></image>
								<view>{{wx}} 微信</view>
							</view>
							<view class="copy" @click="copyBtn(2)">一键复制</view>
						</view>
					</view>
				</view>

				<!-- 申请退款 -->
				<view class="refund" v-if="isShow1">
					<image src="@/static/image/money.png"></image>
					<view>是否确认申请退款</view>
					<view class="operate">
						<view @click="isShow1=false" :style="{color}">取消</view>
						<view>|</view>
						<view @click="headleApplyRefund">确定</view>
					</view>
				</view>
				<!-- 已提交申请退款 -->
				<view class="submitted" v-if="isShow2">
					<view class="title">
						<image src="../../static/image/money.png"></image>
						<view>已提交退款申请</view>
					</view>
					<view class="hint">将在24小时内退回原账户</view>
					<view class="done" @click="isShow2=false">知道了</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				isShow1: false,
				isShow2: false,
				phone: 13246837030,
				mailbox: '3092015856@qq.com',
				wx: 'kfcxin',
				phones: null,
				uid: null,
				color: null
			}
		},
		onLoad(opiton) {
			this.phones = opiton.phone
			this.uid = opiton.id
			this.color = opiton.color
		},

		onShow() {

		},
		methods: {
			headleApplyRefund() {
				let that = this
				that.isShow1 = false
				uni.showLoading()
				that.$myRequesy({
					url: 'tl/refund',
					method: 'POST',
					data: {
						phone: that.phones,
						id: that.uid
					}
				}).then(res => {
					if (res.code === 0) {
						that.isShow2 = true
						uni.hideLoading()
						uni.navigateTo({
							url: '../credential/index?id=' + that.uid + '&phone=' + that.phones
						})
					} else {
						uni.showToast({
							title: "退款失败,请联系客服",
							icon: "none"
						})
					}
				})

			},

			headleApply() {
				let date = new Date().getTime()
				let num1 = uni.getStorageSync('hello')
				if (num1 && (num1 + 300000 > date)) {
					uni.showToast({
						title: "为确保退款成功，请五分钟后再试",
						icon: "none"
					})
				} else {
					this.isShow1 = true
				}

			},

			//复制
			// #ifdef H5
			copyBtn(state) {
				console.log(state)
				let result
				let textarea = document.createElement("textarea")
				textarea.value = state === 0 ? this.mailbox : state === 1 ? this.phone : this.wx
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选中文本内容
				textarea.setSelectionRange(0, (state === 0 ? this.mailbox.length : state === 1 ? this.phone : this.wx
					.length)) // 设置选定区的开始和结束点
				uni.showToast({ //提示
					title: '已复制'
				})
				result = document.execCommand("copy") //将当前选中区复制到剪贴板
				textarea.remove()
			},
			// #endif

		}
	}
</script>

<style lang="scss" scoped>
	.pay_success {
		.content {
			width: 100%;
			height: 700upx;
			background-color: rgba(255, 126, 39, 100);
			text-align: center;
			padding-top: 124upx;
			box-sizing: border-box;
			margin-bottom: 58upx;

			.first {
				margin: 0 auto;
				width: 610upx;
				color: rgba(255, 255, 255, 100);
				font-size: 30upx;
				font-weight: 600;
				padding-bottom: 50upx;
				border-bottom: 2upx solid rgba(255, 255, 255, 0.10);

				image {
					width: 150upx;
					height: 150upx;
					margin-bottom: 20upx;
				}
			}

			.last {
				text-align: left;
				margin-top: 40upx;
				color: rgba(249, 249, 249, 0.75);
				font-size: 28upx;
				padding: 0upx 30upx;
			}
		}

		.state {
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba(0, 0, 0, 0.35);
			font-size: 28upx;

			view:nth-child(2) {
				margin: 0upx 40upx;
			}

		}

		.footer {
			text-align: center;
			margin-top: 20upx;
			font-size: 26upx;
			color: rgba(0, 0, 0, 0.35);
		}



		.modal {
			position: relative;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 650upx;
			background-color: #fff;
			border-radius: 30upx;
			text-align: center;
			box-sizing: border-box;

			// 联系客服
			.service {
				height: 500upx;
				padding: 50upx 0upx 86upx;
				box-sizing: border-box;

				image {
					width: 40upx;
					height: 40upx;
				}

				.title {
					font-weight: 600;
					padding-bottom: 42upx;
					border-bottom: 2upx solid rgba(244, 245, 245, 100);
				}

				.cancel {
					position: absolute;
					top: 24upx;
					right: 22upx;
				}

				.box {
					margin: 58upx 60upx 0upx;

					.way {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 40upx;
						color: rgba(48, 48, 48, 100);
						font-size: 28upx;

						.item {
							display: flex;
							align-items: center;

							image {
								margin-right: 10upx;
							}
						}

						.copy {
							color: rgba(34, 135, 249, 100);
						}
					}
				}
			}

			// 申请退款
			.refund {
				height: 410upx;

				image {
					width: 90upx;
					height: 90upx;
					margin: 60upx 0upx 20upx;
				}

				.operate {
					font-size: 30upx;
					padding: 40upx 0upx;
					display: flex;
					justify-content: center;
					margin-top: 68upx;
					border-top: 2upx solid rgba(244, 245, 245, 100);

					view:first-child {
						color: rgba(255, 126, 39, 100);
					}

					view:nth-child(2) {
						margin: 0upx 112upx;
						color: rgba(244, 245, 245, 100);
					}
				}
			}

			.submitted {
				height: 450upx;
				padding: 116upx 0upx 46upx;
				box-sizing: border-box;

				.title {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 30upx;
					font-size: 30upx;

					image {
						width: 42upx;
						height: 42upx;
						margin-right: 10upx;
					}
				}

				.hint {
					color: rgba(0, 0, 0, 0.5);
					font-size: 26upx;
					margin-bottom: 106upx;
				}

				.done {
					border-top: 2upx solid rgba(244, 245, 245, 100);
					padding-top: 30upx;
				}
			}
		}


		// 遮罩层
		.mask {
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: rgba(0, 0, 0, 0.5);
		}

	}
</style>
